<template>
	<div id="cheatDetail">
		<div class="breadcrumb">
			<img src="../../../../static/img/outClass_icon_1.png" class="head_img">
			<span class="title" @click="cancel()">作弊管理</span>
			<span>/ 作弊详情</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>作弊详情</span>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<div class="search">
				<span style="margin-left:10px;"> 姓名：{{userInfo.name}}</span>
				<span style="margin-left:10px;"> 性别：{{userInfo.gender}}</span>
				<span style="margin-left:10px;"> 学号：{{userInfo.campusId}}</span>
				<span style="margin-left:10px;"> 老师：{{userInfo.teacherName}}</span>
				<span style="margin-left:10px;"> 课程：{{userInfo.className}}</span>
			</div>
			<el-table :data="list">
				<el-table-column prop="startTime" label="开始时间" min-width="160">
				</el-table-column>
				<el-table-column prop="duration" label="运动时长">
				</el-table-column>
				<el-table-column prop="speed" label="配速">
				</el-table-column>
				<el-table-column prop="length" label="跑步里程">
				</el-table-column>
				<el-table-column prop="avgStepFreq" label="步频">
				</el-table-column>
				<el-table-column label="跑步模式">
					<template scope="scope">
						<span v-if="scope.row.runMode ==1">随机终点</span>
						<span v-if="scope.row.runMode ==2">操场跑</span>
						<span v-if="scope.row.runMode ==3">约定终点</span>
						<span v-if="scope.row.runMode ==4">自由跑</span>
					</template>
				</el-table-column>
				<el-table-column label="作弊原因">
					<template scope="scope">
						<span v-if="scope.row.cheatReason ==1">人肉代跑</span>
						<span v-if="scope.row.cheatReason ==2">骑车作弊</span>
						<span v-if="scope.row.cheatReason ==3">其他原因</span>
						<span v-if="scope.row.cheatReason ==0">被举报</span>
					</template>
				</el-table-column>
				<el-table-column prop="cheatContent" label="原因详情" min-width="200">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				userInfo: {},
				currentPage: 1,
				totalCount: 0,
				sid: this.$util.getUrlParam("semester"),
				cheatId: this.$util.getUrlParam("cheatId")
			};
		},
		mounted() {
			this.getUserInfo();
			this.getCheatDetail();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//用户信息；
			getUserInfo() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/studentinfo";
				this.$http({
					url,
					method: "GET",
					params: {
						sid: this.sid,
						uid: this.cheatId
					}
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data.gender == 0) {
							response.data.data.gender = "女";
						} else {
							response.data.data.gender = "男";
						}
						response.data.data.semesterGoal = response.data.data.semesterGoal / 1000;
						this.userInfo = response.data.data;
					}
				});
			},
			//获取作弊详情列表
			getCheatDetail() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v1/cheat/cheatdetails";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						sid: parseInt(this.sid),
						cheatId: parseInt(this.cheatId),
						pageNum: parseInt(this.currentPage)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let detailList = response.data.data.cheatList;
						this.totalCount = response.data.data.totalCount;
						if (detailList && detailList.length > 0) {
							for (let i = 0; i < detailList.length; i++) {
								let $startTime = detailList[i].beginAt,
									$duration = detailList[i].duration,
									$runMode = detailList[i].runMode,
									$speed = detailList[i].speed,
									$length = detailList[i].length,
									$avgStepFreq = detailList[i].avgStepFreq,
									$cheatReason = detailList[i].cheatReason,
									$cheatContent = detailList[i].cheatContent;

								this.list.push({
									runMode: $runMode,
									cheatReason: $cheatReason,
									duration: Math.ceil($duration / 60) + "min",
									length: ($length / 1000).toFixed(2) + "公里",
									avgStepFreq: $avgStepFreq ? $avgStepFreq + "步/分钟" : '',
									startTime: $startTime ? new Date($startTime).format("yyyy/MM/dd hh:mm:ss") : '',
									speed: parseInt($speed) + "'" + parseInt(($speed - parseInt($speed)) * 60) + '"',
									cheatContent: $cheatContent
								});
							}
						}
					}
				});
			},
			//返回
			cancel() {
				let teacher = this.$util.getUrlParam("teacher");
				let classes = this.$util.getUrlParam("classes");
				let pageNum = this.$util.getUrlParam("pageNum");
				let condition = this.$util.getUrlParam("condition");
				let semester = this.$util.getUrlParam("semester").trim();
				let params = { semester, teacher, classes, pageNum, condition };
				this.$util.refreshTo("#/cheatManage", params);
			},
			//请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getCheatDetail();
			}
		}
	};
</script>

<style scoped>
	#cheatDetail {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398ff;
	}

	.infoHead {
		width: 100%;
		height: 36px;
		background-color: #f5f5f5;
		line-height: 36px;
		font-size: 12px;
		color: #333;
	}

	.search {
		padding: 10px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.search span {
		padding-right: 20px;
		color: #333744;
		font-size: 13px;
	}

	.qizhiDate {
		width: 100%;
	}
</style>